<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/a4.css" rel="stylesheet">
  </head>
  <body>
    <div class="page">
      <div class="container text-center english">
        <div class="row row-cols-4">
        </div>
      </div>
    </div>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        var words = [
          {word: 'quite', chinese: '安静', phonetic_symbol: '/kwaɪt/', not_display: ['word']},
          {word: 'place', chinese: '地方', phonetic_symbol: '/pleɪs/', not_display: ['word']},
          {word: 'hill', chinese: '小山', phonetic_symbol: '/hɪl/', not_display: ['word']},
          {word: 'take', chinese: '带领', phonetic_symbol: '/teɪk/', not_display: ['word']},
          {word: 'some', chinese: '一些', phonetic_symbol: '/sʌm/', not_display: ['word']},
          {word: 'delicious', chinese: '美味的', phonetic_symbol: '/dɪˈlɪʃəs/', not_display: ['word']},
          {word: 'us', chinese: '我们（宾格）', phonetic_symbol: '/ʌs/', not_display: ['word']},
          {word: 'plant', chinese: '植物/种植', phonetic_symbol: '/plɑːnt/', not_display: ['word']},
          {word: 'smile', chinese: '微笑', phonetic_symbol: '/smaɪl/', not_display: ['word']},
          {word: 'way', chinese: '方式/道路', phonetic_symbol: '/weɪ/', not_display: ['word']},
          {word: 'nature', chinese: '自然', phonetic_symbol: '/ˈneɪtʃər/', not_display: ['word']},
          {word: 'really', chinese: '真正地', phonetic_symbol: '/ˈriːəli/', not_display: ['word']},
          {word: 'enjoy', chinese: '喜欢/享受', phonetic_symbol: '/ɪnˈdʒɔɪ/', not_display: ['word']},
          {word: 'travelling', chinese: '旅行', phonetic_symbol: '/ˈtrævlɪŋ/', not_display: ['word']},
          {word: 'always', chinese: '总是', phonetic_symbol: '/ˈɔːlweɪz/', not_display: ['word']},
          {word: 'often', chinese: '经常', phonetic_symbol: '/ˈɒfn/', not_display: ['word']},
          {word: 'cooking', chinese: '烹饪', phonetic_symbol: '/ˈkʊkɪŋ/', not_display: ['word']},
          {word: 'smiling', chinese: '微笑的', phonetic_symbol: '/ˈsmaɪlɪŋ/', not_display: ['word']},
          {word: 'hobby', chinese: '爱好', phonetic_symbol: '/ˈhɒbi/', not_display: ['word']},
          {word: 'everything', chinese: '一切事物', phonetic_symbol: '/ˈevriθɪŋ/', not_display: ['word']},
          {word: 'every', chinese: '每一个', phonetic_symbol: '/ˈevri/', not_display: ['word']},
          {word: 'thing', chinese: '事物', phonetic_symbol: '/θɪŋ/', not_display: ['word']},
          {word: 'animal', chinese: '动物', phonetic_symbol: '/ˈænɪml/', not_display: ['word']},
          {word: 'family', chinese: '家庭', phonetic_symbol: '/ˈfæməli/', not_display: ['word']},
          {word: 'friend', chinese: '朋友', phonetic_symbol: '/frend/', not_display: ['word']},
          {word: 'with', chinese: '和...一起', phonetic_symbol: '/wɪð/', not_display: ['word']},
          {word: 'feel', chinese: '觉得/感到', phonetic_symbol: '/fiːl/', not_display: ['word']},
          {word: 'weekend', chinese: '周末', phonetic_symbol: '/ˌwiːkˈend/', not_display: ['word']},
          {word: 'flower', chinese: '花', phonetic_symbol: '/ˈflaʊər/', not_display: ['word']},
          {word: 'cook', chinese: '烹饪/厨师', phonetic_symbol: '/kʊk/', not_display: ['word']},
          {word: 'watch', chinese: '观看/手表', phonetic_symbol: '/wɒtʃ/', not_display: ['word']},
          {word: 'cinema', chinese: '电影院', phonetic_symbol: '/ˈsɪnəmə/', not_display: ['word']},
          {word: 'activity', chinese: '活动', phonetic_symbol: '/ækˈtɪvəti/', not_display: ['word']},

          {word: 'enjoy drawing', chinese: '享受绘画', phonetic_symbol: '', not_display: ['word'], col: 'col-4'},
          {word: 'at the weekend', chinese: '在周末', phonetic_symbol: '', not_display: ['word'], col: 'col-4'},
          {word: 'in this way', chinese: '用这种方式', phonetic_symbol: '', not_display: ['word'], col: 'col-4'},
          {word: 'get to know', chinese: '了解，认识', phonetic_symbol: '', not_display: ['word'], col: 'col-4'},
          {word: 'take ... to', chinese: '带...去', phonetic_symbol: '', not_display: ['word'], col: 'col-4'},
          {word: 'watch films', chinese: '看电影', phonetic_symbol: '', not_display: ['word'], col: 'col-4'},
          {word: 'find a quiet place', chinese: '找到一个安静的地方', phonetic_symbol: '', not_display: ['word'], col: 'col-6'},
          {word: 'make me feel happy', chinese: '让我感到快乐', phonetic_symbol: '', not_display: ['word'], col: 'col-6'},
          {word: 'go to the cinema', chinese: '去电影院', phonetic_symbol: '', not_display: ['word'], col: 'col-6'},
          {word: 'cook delicious food', chinese: '烹饪美味的食物', phonetic_symbol: '', not_display: ['word'], col: 'col-6'},
          {word: 'like travelling best', chinese: '最喜欢旅行', phonetic_symbol: '', not_display: ['word'], col: 'col-6'},
          {word: 'the beautiful nature', chinese: '美丽的大自然', phonetic_symbol: '', not_display: ['word'], col: 'col-6'},
          {word: 'animals with big eyes', chinese: '有大眼睛的动物', phonetic_symbol: '', not_display: ['word'], col: 'col-6'},
          {word: 'draw picture of nature', chinese: '画大自然的图画', phonetic_symbol: '', not_display: ['word'], col: 'col-6'},
          {word: 'some interesting places', chinese: '一些有趣的地方', phonetic_symbol: '', not_display: ['word'], col: 'col-6'},
          {word: 'see the beautiful world', chinese: '看到美丽的世界', phonetic_symbol: '', not_display: ['word'], col: 'col-6'},
          {word: 'children with smiling faces', chinese: '面带微笑的孩子们', phonetic_symbol: '', not_display: ['word'], col: 'col-6'},
        ];
        
        var html = '';
        for (var i = 0; i < words.length; i++) {
          var col_class = 'col',
            word = '&nbsp;', 
            chinese = '&nbsp;',
            phonetic_symbol = '';

          if (typeof words[i].col != 'undefined' && words[i].col != '') {
            col_class = words[i].col;
          }
          if (typeof words[i].not_display == 'undefined' || words[i].not_display.indexOf('word') == -1) {
            word = words[i].word;
          }
          if (typeof words[i].not_display == 'undefined' || words[i].not_display.indexOf('chinese') == -1) {
            chinese = words[i].chinese;
          }
          if (typeof words[i].not_display == 'undefined' || words[i].not_display.indexOf('phonetic_symbol') == -1) {
            phonetic_symbol = words[i].phonetic_symbol;
          }

          html += '<div class="' + col_class + '">';
          html += '<div class="english-word">';
          html += '<div class="phonetic_symbol">' +  phonetic_symbol + '</div>';
          html += '<div class="rule">' + word + '</div>';
          html += '<div class="chinese">' + chinese + '</div>';
          html += '</div>';
          html += '</div>';
        }
        $('.english .row').html(html);
      });
    </script>
  </body>
</html>